<template>
  <div class="layout">
    <Menu class="layout-nav" mode="horizontal" @on-select="changePage" theme="dark" :active-name="currentPage"
          layout="row center-center">
      <img class="layout-logo" src="../imgs/logo-w.png"/>

      <div class="layout-nav" layout="row center-center">
        <Menu-item name="statistic" v-show="currentPage !== 'activityDetail'">
          <Icon type="ios-pie"></Icon>
          活动总览

        </Menu-item>

        <Menu-item name="userManage" v-show="currentPage !== 'activityDetail' && isAdmin">
          <Icon type="person-stalker"></Icon>
          用户管理

        </Menu-item>
        <Menu-item name="statistic" v-show="currentPage === 'activityDetail'">
          <Icon type="chevron-left"></Icon>
          返回活动总览

        </Menu-item>
        <Menu-item name="activityDetail" v-show="currentPage === 'activityDetail'">
          <Icon type="grid"></Icon>
          活动详情

        </Menu-item>
      </div>
      <div class="layout-user">
        {{user.name}}

        <Icon type="chevron-down"></Icon>
        <div class="layout-action">
          <p class="layout-action_button" @click="logout">退出登录</p>
        </div>
      </div>
    </Menu>
    <Menu class="layout-nav" mode="horizontal" @on-select="changeFilter" :active-name="currentFilter" layout="row center-center" style="border-bottom: 1px solid #464c5b">
      <div class="layout-assistant">
        <Menu-item v-for="filter in subMenu" :key="filter.value" :name="filter.value">{{filter.label}}


        </Menu-item>
      </div>
    </Menu>
    <!--<h1 class="layout-title">{{pageName}}</h1>-->

    <router-view class="layout-content"></router-view>
  </div>
</template>

<script type="text/ecmascript-6">

    import b from './bus'
    import axios from 'axios'


    export default{
        data () {
            return {
                currentPage: 'statistic',
                currentFilter: '',
                subMenuMap: {
                    statistic: [
                        {
                            label: '全部',
                            value: '1,2,3'
                        },
                        {
                            label: '直播中',
                            value: '1'
                        },
//                        {
//                            label: '未开始',
//                            value: '1'
//                        },
                        {
                            label: '已结束',
                            value: '3'
                        }
                    ],
                    userManage: [
                        {
                            label: '摄影师',
                            value: 'photographers'
                        },
                        {
                            label: '修图师',
                            value: 'retouchers'
                        },
                        {
                            label: '合作方',
                            value: 'partners'
                        },
                    ],
                    activityDetail: [
                        {
                            label: '缩略图',
                            value: 'thumbnail'
                        },
                        {
                            label: '原片',
                            value: 'raw'
                        },
                        {
                            label: '精修片',
                            value: 'truing'
                        },
                    ]
                },
                pageNameMap: {
                    statistic: '活动统计',
                    userManage: '用户管理',
                    activityDetail: '活动详情'
                },
                pageToGoMap: {
                    statistic: 'statistic/1,2,3',
                    userManage: 'userManage/photographers',
                    activityDetail: 'activityDetail/thumbnail'
                }
            }
        },
        created () {
            b.$on('changePage', (name, actID) => {
                this.changePage(name, actID)
            })
        },
        computed: {
            subMenu () {
                return this.subMenuMap[this.currentPage]
            },
            pageName () {
                return this.pageNameMap[this.currentPage]
            },
            user () {
                return this.$store.state.user
            },
            isAdmin () {
                return this.user.role === 4
            },
        },
        beforeRouteEnter (to, from, next) {
            axios.get(apiHost + '/user_info/', {
                withCredentials: true,
                params: {time: new Date().getTime()}
            }).then(res => {
                next()
            }).catch(e => {
                next('/login')
            })
        },
        mounted () {
            this.$store.dispatch('GetUserInfo')
            this.currentPage = this.$route.name
            this.$nextTick(() => {
                this.currentFilter = this.$route.params.filter
            })
        },
        methods: {
            changePage (name, actID) {
                this.currentPage = name
                let to = this.pageToGoMap[name]
                if (to !== this.$route.path) {
                    this.$router.push({path: `/home/${to}${actID ? `/${actID}`: ''}`})
                }

            },
            changeFilter (filter) {
                this.currentFilter = filter
                this.$router.push({params: {filter}})
            },
            async logout () {
                let res = await this.api.logout()
                if (res.success) {
                    this.$router.push('/login')
                }
            }
        },
        watch: {
            $route () {
                this.$nextTick(() => {
                    this.currentFilter = this.$route.params.filter
                })
            }
        }
    }
</script>

<style lang="scss">
  @import "../sass/index.scss";
  @import '../../node_modules/iview/dist/styles/iview.css';

  .layout {
    border: 1px solid #d7dde4;
    background: #ddd;
    height: 100vh;
    min-width: 1200px;
    overflow: auto;
    /*background-image: url(../imgs/cloth.png);*/

    &-nav {
      width: 100vw;
      min-width: 1400px;
    }

    &-user {
      position: absolute;
      z-index: 1;
      right: 20px;
      color: white;
      cursor: pointer;
      &:hover {
        .layout-action {
          display: block;
        }
      }


    }
    &-action {
      display: none;
      position: absolute;
      top: 90%;
      width: 130%;
      margin-left: -15%;
      background: white;
      border: 1px solid #ddd;
      &_button {
        text-align: center;
        font-size: 13px;
        color: #555;
        line-height: 1.4;
        padding: 10px 0;
        &:hover {
          background: #f0f0f0;
        }
      }
    }
  }

  .layout-logo {
    position: absolute;
    width: 90px;
    top: 15px;
    left: 20px;
  }

  .layout-assistant {
    height: inherit;
  }

  .layout-title {
    font-size: 14px;
    color: #666;
    font-weight: normal;
    margin: 0;
    padding: 10px 15px 0;
  }

  .layout-content {
    display: block;
    height: calc(100vh - 140px);
    min-height: 550px;
    margin-top: 10px;
    overflow: auto;
    overflow-x: hidden;
    border-radius: 4px;
  }

  .layout-copy {
    text-align: center;
    padding: 5px 0 20px;
    color: #9ea7b4;
  }
</style>